<template>
	<view >
		<l-f2 class="f2Chart" ref="chart"></l-f2>
	</view>
</template>

<script>
	// import F2 from '@antv/f2';
	import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js';
	import lF2 from '@/uni_modules/lime-f2/components/lime-f2/';
	export default {
		props:["pieMaps"],
		components: {
			lF2
		},
		data() {
			return {
				pieMap: {
					'快手': '49%',
					'抖音': '51%',
				},
				pieData: [{
						name: '快手',
						percent: 0.49,
						a: '1'
					},
					{
						name: '抖音',
						percent: 0.51,
						a: '1'
					},


				]
			}
		},
		created() {

		},
		mounted() {
			this.init()
		},
		methods: {
			init(){
				let arr=this.pieMaps
				// this.pieMap
				for(var key in this.pieMap){
				    if(key ==="抖音"){
						this.pieMap[key]=arr.tiktok*100+"%"
					}else{
						this.pieMap[key]=arr.kwaifu*100+"%"
					}
				}
				this.pieData[0].percent=arr.tiktok
				this.pieData[1].percent=arr.kwaifu
				let _this = this
				this.$refs.chart.init(config => {
					const chart = new F2.Chart(config);
					chart.source(_this.pieData, {
						percent: {
							formatter: val => val * 100 + '%'
						}
					});
					chart.legend({
						position: 'bottom',
						align: 'center',
						
						itemFormatter: val => val + '  ' + _this.pieMap[val]
					});
					chart.tooltip(false);
					chart.coord('polar', {
						transposed: true,
						radius: 0.9,
						innerRadius: 0.5
					});
					chart.axis(false);
					chart
						.interval()
						.position('a*percent')
						.color('name', ['#63DAAB', '#5B8FF9', ])
						.adjust('stack')
						.style({
							lineWidth: 1,
							stroke: '#fff',
							lineJoin: 'round',
							lineCap: 'round'
						})
						.animate({
							appear: {
								duration: 1800,
								easing: 'bounceOut'
							}
						});
				
					chart.render();
					// 需要把 chart 返回
					return chart;
				});
			}
		}
	}
</script>

<style>
	.f2Chart{
		margin-left: 10rpx;
		/* text-align: center !important; */
	}
</style>
